<template>
  <div class="box">
    <div class="pgsrch">
      <el-input
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        v-model="thetext"
        @keyup.enter="updateSrhRes"
      >
      </el-input>
      <button
        class="btn"
        @click="updateSrhRes"
      >搜索</button>
    </div>
    <div class="msrch">
      <div
        class="snode"
        v-if="chktype===1"
      >搜索“{{inputtext}}”，找到 <span>{{songtolnum}}</span> 首歌曲</div>
      <div
        class="snode"
        v-else-if="chktype===100"
      >搜索“{{inputtext}}”，找到 <span>{{artisttolnum}}</span>个歌手 </div>
      <div
        class="snode"
        v-else-if="chktype===10"
      >搜索“{{inputtext}}”，找到 <span>{{albumtolnum}}</span>张专辑 </div>
      <div
        class="snode"
        v-else-if="chktype===1014"
      >搜索“{{inputtext}}”，找到 <span>{{videotolnum}}</span>个视频 </div>
      <div
        class="snode"
        v-else-if="chktype===1006"
      >搜索“{{inputtext}}”，找到 <span>{{songtolnum}}</span>个歌词 </div>
      <div
        class="snode"
        v-else-if="chktype===1000"
      >搜索“{{inputtext}}”，找到 <span>{{pltolnum}}</span>个歌单 </div>
      <div
        class="snode"
        v-else-if="chktype===1009"
      >搜索“{{inputtext}}”，找到 <span>{{songtolnum}}</span>个节目 </div>
      <div
        class="snode"
        v-else-if="chktype===1002"
      >搜索“{{inputtext}}”，找到 <span>{{songtolnum}}</span>个用户 </div>
      <el-tabs
        type="border-card"
        :stretch="true"
        @tab-click="chgType"
      >
        <el-tab-pane label="单曲">
          <ul class="musiclist">
            <li
              v-for="(item,index) in songsList"
              :key="index"
            >
              <div class="td play"><i
                  class="iconfont icon-bofang"
                  @click="playMusic(item.id)"
                ></i></div>
              <div class="td w0"><a href="#">{{item.name}}</a></div>
              <div class="td iconfa">
                <div class="boxaaa icons">
                  <a
                    href="#"
                    class="icn"
                  ><i
                      class="iconfont icon-hao"
                      title="添加到播放列表"
                    ></i></a>
                  <a
                    href="#"
                    class="icn"
                  ><i
                      class="iconfont icon-tianjiawenjianjia"
                      title="收藏"
                    ></i></a>
                  <a
                    href="#"
                    class="icn"
                  ><i
                      class="iconfont icon-fenxiang"
                      title="分享"
                    ></i></a>
                  <a
                    href="#"
                    class="icn"
                  ><i
                      class="iconfont icon-xiazai1"
                      title="下载"
                    ></i></a>
                </div>

              </div>
              <div
                class="td w1"
                @click="goArtister(item.artists[0].id)"
              >{{item.artists[0].name}}</div>
              <div
                class="td w2 f-thide"
                @click="goAlbum(item.album.id)"
              >{{item.album.name}}</div>
              <div class="td">{{item.duration | dateFormat2}}</div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="歌手">
          <ul class="artiter">
            <li
              v-for="(item,index) in artistList"
              :key="index"
            >
              <div class="artbox">
                <a
                  href="#"
                  @click.prevent="goArtister(item.id)"
                >
                  <img v-lazy="item.img1v1Url">
                </a>
              </div>
              <p>
                <a
                  href="#"
                  class="f-thide"
                  @click.prevent="goArtister(item.id)"
                >{{item.name}}</a>
                <!-- 有图标则表示能去到userhome页，否则表示不能 -->
                <i
                  class="iconfont"
                  v-show="item.img1v1!==-1"
                ></i>
              </p>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="专辑">
          <ul class="albums">
            <li
              v-for="(item,index) in albumList"
              :key="index"
            >
              <div class="abbox">
                <a
                  href="#"
                  @click.prevent="goAlbum(item.id)"
                >
                  <img :src="item.picUrl">
                  <span :title="item.name"></span>
                </a>
                <a
                  href="#"
                  class="iconfont icon-bofang"
                ></a>
              </div>
              <p
                class="dec"
                @click="goAlbum(item.id)"
              >{{item.name}}</p>
              <p class="auth"><span @click="goArtister(item.artists[0].id)">{{item.artists[0].name}}</span></p>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="视频">
          <ul class="shipin">
            <li
              v-for="(item,index) in videoList"
              :key="index"
            >
              <div class="shibox">
                <img :src="item.coverUrl">
                <span
                  :title="item.title"
                  class="msk"
                ></span>
                <p class="bfl">
                  <span class="iconfont icon-shexiangtou4"></span>
                  {{item.playTime/10000}}万
                </p>
                <p class="time">{{item.durationms | dateFormat2}}</p>
              </div>
              <h4>
                <a href="#">{{item.title}}</a>
              </h4>
              <h5>
                <span>{{item.creator[0].userName}}</span>
              </h5>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="歌词">
          <div class="srchsongst">
            <div
              class="geci"
              v-for="(item,index) in geciList"
              :key="index"
            >
              <div class="item">
                <div class="td"><i class="iconfont icon-bofang"></i></div>
                <div class="td w0"><a href="#">{{item.name}}</a></div>
                <div class="td iconfa">
                  <div class="boxaaa icons">
                    <a
                      href="#"
                      class="icn"
                    ><i class="iconfont icon-hao"></i></a>
                    <a
                      href="#"
                      class="icn"
                    ><i class="iconfont icon-tianjiawenjianjia"></i></a>
                    <a
                      href="#"
                      class="icn"
                    ><i class="iconfont icon-fenxiang"></i></a>
                    <a
                      href="#"
                      class="icn"
                    ><i class="iconfont icon-xiazai1"></i></a>
                  </div>

                </div>
                <div class="td w1">{{item.artists[0].name}}</div>
                <div class="td w2">{{item.album.name}}</div>
                <div class="td">{{item.duration}}</div>
              </div>
              <!-- 歌词 -->
              <div class="lyric">
                <div class="lrcbufen gecibox1">
                  <p> <span class="s-fc7">{{item.artists[0].name}}</span> </p>
                  <!-- 循环显示歌词 -->
                  <p class="ci">
                    <pre>{{item.lyrics.txt}}</pre>
                  </p>
                </div>
                <div class="lrcall  gecibox2">
                  <p> <span class="s-fc7">{{item.artists[0].name}}</span> </p>
                  <p class="ci">
                    <pre>{{item.lyrics.txt}}</pre>
                  </p>
                </div>
                <div class="crl">
                  <a
                    href="#"
                    @click.prevent="changegeci(index)"
                  >{{chgtext}}<i class="iconfont icon-down"></i></a>
                </div>
              </div>
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="歌单">
          <ul class="pllist">
            <li
              v-for="(item,index) in plList"
              :key="index"
            >
              <div class="td"><i class="iconfont icon-bofang"></i></div>
              <div class="pic"><img v-lazy="item.coverImgUrl"></div>
              <div class="td w0"><a
                  href="#"
                  class="f-thide"
                  @click.prevent="goplayList(item.id)"
                >{{item.name}}</a></div>
              <div class="td iconfa">
                <div class="boxaaa icons">
                  <a
                    href="#"
                    class="icn"
                  ><i class="iconfont icon-hao"></i></a>
                  <a
                    href="#"
                    class="icn"
                  ><i class="iconfont icon-tianjiawenjianjia"></i></a>
                  <a
                    href="#"
                    class="icn"
                  ><i class="iconfont icon-fenxiang"></i></a>
                </div>

              </div>
              <div class="td w1">{{item.trackCount}}首</div>
              <div class="td w2 f-thide">by {{item.creator.nickname}}</div>
              <div class="td w6">收藏：{{item.bookCount}}</div>
              <div class="td w7">收听：{{item.playCount/10000}}万</div>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="声音主播">
        </el-tab-pane>
        <el-tab-pane label="用户">
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <h1>哈哈哈------{{this.$route.query.srkey}}</h1> -->
  </div>
</template>

<script>
import axios from 'axios'
import bus from '../../eventbus'
export default {
  data () {
    return {
      thetext: '',
      // 输入框文本
      inputtext: '',
      chktype: 1,
      // 搜索结果
      songsList: [],
      artistList: [],
      albumList: [],
      videoList: [],
      plList: [],
      geciList: [],
      // 搜索结果数量
      songtolnum: 0,
      artisttolnum: 0,
      albumtolnum: 0,
      videotolnum: 0,
      pltolnum: 0,
      gecitolnum: 0,
      // 歌词
      lyricsObjArr2: '',
      // 展开收起歌词:
      isshowAll: false,
      chgtext: '展开'
    }
  },
  watch: {
    // tab当前选中的type
    chktype (newVal, oldVal) {
      console.log(newVal, oldVal)
      this.getresult()
    },
    inputtext (newVal, oldVal) {
      console.log(newVal, oldVal)
      this.getresult()
    }
  },
  created () {
    this.start()
    // 获取搜搜结果
    this.getresult()
  },
  methods: {
    // 准备工作：刚进入页面时，输入框的值是大搜索框传过来的值
    start () {
      this.inputtext = this.$route.query.srkey
      this.thetext = this.$route.query.srkey
    },
    // tabs被选中时触发
    chgType (tab) {
      if (tab.index == 0) this.chktype = 1
      else if (tab.index == 1) this.chktype = 100
      else if (tab.index == 2) this.chktype = 10
      else if (tab.index == 3) this.chktype = 1014
      else if (tab.index == 4) this.chktype = 1006
      else if (tab.index == 5) this.chktype = 1000
      else if (tab.index == 6) this.chktype = 1009
      else if (tab.index == 7) this.chktype = 1002
    },
    // 获取搜索结果
    async getresult () {
      let res = await axios.get('https://autumnfish.cn//search?keywords=' + this.inputtext + '&type=' + this.chktype)
      if (this.chktype == '1') {
        this.songsList = res.data.result.songs
        this.songtolnum = res.data.result.songCount
      }
      else if (this.chktype == '100') {
        // console.log(res)
        this.artistList = res.data.result.artists
        this.artisttolnum = res.data.result.artistCount
      }
      else if (this.chktype == '10') {
        this.albumList = res.data.result.albums
        this.albumtolnum = res.data.result.albumCount
      }
      else if (this.chktype == '1014') {
        this.videoList = res.data.result.videos
        this.videotolnum = res.data.result.videoCount
      }
      else if (this.chktype == '1006') {
        // console.log(res)
        this.geciList = res.data.result.songs
        this.gecitolnum = res.data.result.songCount
      }
      else if (this.chktype == '1000') {
        this.plList = res.data.result.playlists
        this.pltolnum = res.data.result.playlistCount
      }
      else if (this.chktype == '1009') {
        this.songsList = res.data.result.djRadios
        this.songtolnum = res.data.result.djRadiosCount
      }
      else if (this.chktype == '1002') {
        this.songsList = res.data.result.userprofiles
        this.songtolnum = res.data.result.userprofileCount
      }
      // console.log('搜索结果↓↓↓↓↓↓↓↓↓↓↓↓↓↓')
      // console.log(this.plList)
    },
    // 输入框打字，按下回车
    updateSrhRes () {
      this.inputtext = this.thetext
    },
    // 获取歌词
    async gecia (i) {
      console.log(i)
      let res = await axios.get('https://autumnfish.cn//lyric?id=' + this.songsList[i].id)
      const regNewLine = /\n/
      const lineArr = res.data.lrc.lyric.split(regNewLine) // 每行歌词的数组
      const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/
      const lyricsObjArr = [];
      lineArr.forEach(item => {
        if (item === '') return
        const obj = {}
        const time = item.match(regTime)
        obj.lyric = item.split(']')[1].trim() === '' ? '' : item.split(']')[1].trim()
        obj.time = time ? this.formatLyricTime(time[0].slice(1, time[0].length - 1)) : 0
        obj.uid = Math.random().toString().slice(-6)
        if (obj.lyric !== '') {
          lyricsObjArr.push(obj)
        }
      })
      this.lyricsObjArr2 = lyricsObjArr;
    },
    // 展开或收起歌词
    changegeci (i) {
      console.log(i)
      if (this.isshowAll) {
        this.isshowAll = false;
        document.getElementsByClassName('gecibox1')[i].style.display = 'block'
        document.getElementsByClassName('gecibox2')[i].style.display = 'none'
        this.chgtext = '展开'
      }
      else {
        this.isshowAll = true;
        document.getElementsByClassName('gecibox1')[i].style.display = 'none'
        document.getElementsByClassName('gecibox2')[i].style.display = 'block'
        this.chgtext = '收起'
      }

    },
    // 高亮替换
    brightKeyword (val) {
      let keyword = this.inputtext
      // val包含关键词
      if (val.indexOf(keyword) !== -1) {
        // 替换
        return val.replace(keyword, `<font color='#ff5134'>${keyword}</font>`)
      } else {
        return val
      }
    },
    playMusic (id) {
      bus.$emit('musicid', id)
    },
    goArtister (id) {
      // console.log(id)
      this.$router.push({ path: '/artist', query: { id: id } })
    },
    goAlbum (id) {
      this.$router.push({ path: '/album', query: { id: id } })
    },
    goplayList (id) {
      this.$router.push({ path: '/playlist', query: { id: id } })
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  padding: 40px;
  .pgsrch {
    width: 420px;
    height: 40px;
    margin: 0 auto;
    position: relative;
    .btn {
      position: absolute;
      right: 11px;
      top: 8px;
    }
  }
  .msrch {
    .snode {
      margin: 28px 0 17px;
      font-size: 12px;
      color: #999;
      span {
        color: #c20c0c;
      }
    }
    // ------------歌曲
    .musiclist {
      margin: 0;
      padding: 0;
      font-size: 12px;
      color: #333;
      margin-top: 20px;
      a {
        text-decoration: none;
        font-size: 12px;
        color: #333;
      }
      li {
        padding: 10px 10px 8px 18px;
        border: 1px solid #fff;
        display: flex;
        justify-content: left;
        align-items: center;
        background-color: #fff;
        .td {
          margin-right: 5px;
          .icn {
            margin-right: 8px;
            margin-bottom: 3px;
          }
        }
        .w0 {
          width: 370px;
        }
        .play {
          .iconfont {
            color: #b3b3b3;
          }
        }
        .play:hover {
          .iconfont {
            color: #656565;
          }
        }
        .w1 {
          width: 15%;
          margin-right: 12px;
          cursor: pointer;
        }
        .w1:hover {
          text-decoration: underline;
        }
        .w2 {
          width: 18%;
          margin-right: 12px;
          min-height: 16px;
          cursor: pointer;
        }
        .w2:hover {
          text-decoration: underline;
        }
        .icons {
          visibility: hidden;
        }
      }
      li:nth-child(odd) {
        background: #f7f7f7;
        border-color: #f7f7f7;
      }
      li:hover {
        background-color: #f2f2f2;
        .icons {
          visibility: visible;
        }
      }
    }
    // ------------歌手
    .artiter {
      margin: 0;
      padding: 0;
      font-size: 12px;
      color: #333;
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 130px;
        height: 154px;
        list-style: none;
        padding: 0 0 30px 24px;
        .artbox {
          width: 130px;
          height: 130px;
          a {
            text-decoration: none;
            img {
              width: 100%;
              height: 100%;
              border: none;
            }
          }
        }
        p {
          margin-top: 8px;
          overflow: hidden;
          a {
            text-decoration: none;
            display: inline-block;
            max-width: 85%;
            vertical-align: middle;
          }
          .iconfont {
            width: 17px;
            height: 18px;
            float: right;
            background-image: url(../../assets/image/icon.png);
            background-position: 0 -740px;
          }
        }
      }
    }
    // ------------专辑
    .albums {
      margin: 0;
      padding: 0;
      font-size: 12px;
      color: #333;
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 153px;
        height: 178px;
        padding: 0 0 30px 33px;
        list-style: none;
        .abbox {
          width: 130px;
          height: 130px;
          position: relative;
          a {
            text-decoration: none;
            display: block;
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            span {
              position: absolute;
              top: 0;
              left: 0;
              width: 153px;
              height: 130px;
              background-image: url(../../assets/image/coverall.png);
              background-position: 0 -845px;
            }
          }
          .iconfont {
            font-size: 23px;
            position: absolute;
            right: 3px;
            bottom: 3px;
            color: #f7f7f7;
          }
        }
        .dec {
          cursor: pointer;
          margin: 8px 0 3px;
          font-size: 14px;
          vertical-align: middle;
          color: #000;
        }
        .auth {
          cursor: pointer;
          margin: 0;
          span {
            display: inline-block;
            max-width: 85%;
            vertical-align: middle;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            color: #333;
          }
        }
      }
    }
    // ------------视频
    .shipin {
      margin: 0;
      padding: 0;
      font-size: 12px;
      color: #333;
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 159px;
        padding: 0 0 40px 26px;
        line-height: 1.5;
        overflow: hidden;
        list-style: none;
        .shibox {
          width: 159px;
          height: 90px;
          position: relative;
          img {
            width: 100%;
            height: 90px;
          }
          .msk {
          }
          .bfl {
            margin: 0;
            position: absolute;
            top: 0;
            right: 0;
            padding-right: 5px;
            height: 20px;
            line-height: 20px;
            color: #fff;
            font-size: 12px;
            box-sizing: border-box;
            text-align: right;
            text-shadow: -2px 1px rgb(0 0 0 / 40%);
            span {
              font-size: 18px;
            }
          }
          .time {
            margin: 0;
            position: absolute;
            bottom: 0;
            left: 0;
            padding-left: 5px;
            height: 20px;
            line-height: 20px;
            color: #fff;
            text-shadow: -2px 1px rgb(0 0 0 / 40%);
          }
        }
        h4 {
          width: 100%;
          height: auto;
          margin: 7px 0 1px;
          border: none;
          font-size: 14px;
          font-weight: normal;
          a {
            display: inline-block;
            width: 100%;
            height: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            color: #000;
            font-size: 14px;
          }
        }
        h5 {
          margin: 0;
          width: 100%;
          font-weight: normal;
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
        }
      }
    }
    // -----------歌词
    .srchsongst {
      margin: 0;
      padding: 0;
      font-size: 12px;
      color: #333;
      margin-top: 20px;
      a {
        text-decoration: none;
        font-size: 12px;
        color: #333;
      }
      .item {
        padding: 10px 10px 8px 18px;
        border: 1px solid #fff;
        display: flex;
        justify-content: left;
        align-items: center;
        background-color: #fff;
        .td {
          margin-right: 5px;
          .icn {
            margin-right: 8px;
            margin-bottom: 3px;
          }
        }
        .w0 {
          width: 370px;
        }
        .w1 {
          width: 15%;
          margin-right: 12px;
        }
        .w2 {
          width: 18%;
          margin-right: 12px;
          min-height: 16px;
        }
        .icons {
          visibility: hidden;
        }
      }
      .item:hover {
        .icons {
          visibility: visible;
        }
      }
      .lyric {
        margin: 10px 0 18px 52px;
        color: #666;
        line-height: 23px;
        word-wrap: break-word;
        word-break: break-all;
        .lrcbufen {
          .s-fc7 {
            color: #0c73c2;
          }
          p {
            margin: 0;
          }
          .ci {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
          }
        }
        .lrcall {
          display: none;
          .s-fc7 {
            color: #0c73c2;
          }
          p {
            margin: 0;
          }
        }
        .crl {
          margin-top: 5px;
          a {
            text-decoration: none;
            color: #666;
            .iconfont {
              margin-left: 5px;
            }
          }
        }
      }
    }
    // ------------歌单
    .pllist {
      margin: 0;
      padding: 0;
      font-size: 12px;
      color: #333;
      margin-top: 20px;
      li {
        padding: 10px 10px 8px 18px;
        border: 1px solid #fff;
        display: flex;
        justify-content: left;
        align-items: center;
        background-color: #fff;
        .td {
          margin-right: 5px;
          .icn {
            margin-right: 8px;
            margin-bottom: 3px;
          }
        }
        .pic {
          width: 50px;
          height: 50px;
          padding: 5px 10px;
          img {
            width: 100%;
            height: 100%;
            cursor: pointer;
          }
        }
        .w0 {
          width: 307px;
          a {
            display: inline-block;
            width: 100%;
            color: #000;
          }
          a:hover {
            text-decoration: underline;
          }
        }
        .w1 {
          width: 35px;
          color: #999;
          margin-right: 12px;
        }
        .w2 {
          width: 20%;
          margin-right: 12px;
          min-height: 16px;
          color: #666;
        }
        .w2:hover {
          text-decoration: underline;
        }
        .w6 {
          width: 78px;
        }
        .w7 {
          width: 78px;
        }
        .icons {
          visibility: hidden;
        }
      }
      li:nth-child(odd) {
        background: #f7f7f7;
        border-color: #f7f7f7;
      }
      li:hover {
        background-color: #f2f2f2;
        .icons {
          visibility: visible;
        }
      }
    }
  }
}
</style>
